<template>
  <div>
    <!--    导航栏（系统消息、订单消息、投诉情况）   -->
    <div class="top-label">
      <van-tabs>
        <!--        系统消息-->
        <van-tab name="a" title="系统消息">
          <div id="news">
            <img src="@/assets/提醒icon.png" style="width: 55px; height: 55px; margin-top: 7.5px; margin-left: -274px;">
            <span style="position: absolute;float: left;margin-top: 10px;margin-left: 18px">违约金支付提醒</span>
            <span
                style="position: marker;
                float: right;
                margin-top: 18px;
                font-size: 15px;
                color: #9f9498;
                margin-right: 21px">
              444444
            </span>

            <span id="span1">您已逾期支付，请尽快支付，否则将产生违约金</span>
          </div>

          <div id="news">
            <img src="@/assets/mail.png" style="width: 55px; height: 55px; margin-top: 7.5px; margin-left: -274px;">
            <span style="position: absolute;float: left;margin-top: 10px;margin-left: 18px">支付通知</span>
            <span
                style="position: marker;
                float: right;
                margin-top: 18px;
                font-size: 15px;
                color: #9f9498;
                margin-right: 21px">
            666666</span>
            <span id="span1">订单自动支付通知，订单自动支付通知，订单自动支付通知</span>
          </div>
        </van-tab>
        <van-tabbar route>
          <van-tabbar-item icon="home-o" to="/shouye">首页</van-tabbar-item>
          <van-tabbar-item icon="reorder-o" @click="toDingdan" to="/orders">订单</van-tabbar-item>
          <van-tabbar-item icon="wallet-o" @click="toqianbao">钱包</van-tabbar-item>
          <van-tabbar-item icon="chat-o" @click="toxiaoxi">消息</van-tabbar-item>
          <van-tabbar-item icon="my-o" @click="toPersonalCenter" to="/my">我的</van-tabbar-item>
        </van-tabbar>
        <!--订单消息-->
        <van-tab name="b" title="订单消息">
          <div id="news" v-for="oi in list">
            <span
                style="position: marker;
                float: right;
                margin-top: 18px;
                font-size: 15px;
                color: #9f9498;
                margin-right: 21px">
              {{ oi. endTime}}</span>
            <img src="@/assets/myy.png" style="width: 60px; height: 60px; float: left; border-radius: 30px; margin-left: 10px; margin-top: 10px">
<!--            <span-->
<!--                style="position: absolute;-->
<!--                float: left;-->
<!--                margin-top: 10px;-->
<!--                margin-left: 10px">尾号{{oe.phone}}</span>-->
            <span style="float: left;margin-top: 10px;">尾号{{ oi.phoneNumber.slice(-4) }}</span>
            <span style="font-size: 15px; color: #757575;float: left; margin-top: 10px">我已到达出发点，请您尽快赶往出发点上车，谢谢</span>
          </div>
        </van-tab>

        <!--        投诉情况-->
        <van-tab name="c" title="投诉情况">

          <van-tabs @click="zhuan">
            <van-tab title="可申诉"></van-tab>
            <van-tab title="申诉中"></van-tab>
            <van-tab title="申诉通过"></van-tab>
            <van-tab title="申诉未通过"></van-tab>
          </van-tabs>

          <div class="neirong">
            <ul class="infinite-list" style="overflow:auto">
              <div id="center" v-for="rid in list">
                <div class="wz">
                  <div class="huiqiu"></div>
                  <span style="font-size: 15px;float: left;margin-left: 10px">完成时间：{{rid.endTime}}</span>
                  <span style="font-size: 15px;float: right;color: blue" v-if="rid.status==1">可申诉></span>
                  <span style="font-size: 15px;float: right;color: red" v-if="rid.status==2">申诉中></span>
                  <span style="font-size: 15px;float: right;color: #626262" v-if="rid.status==3">申诉通过></span>
                  <span style="font-size: 15px;float: right;color: #626262" v-if="rid.status==4">申述未通过></span>
                </div>
                <div class="wz">
                  <div class="lvqiu"></div>
                  <span class="sj">{{ rid. startingPoint}}</span>
                </div>
                <div class="wz">
                  <div class="huangqiu"></div>
                  <span class="sj">{{ rid.terminal }}</span>
                </div>
              </div>
            </ul>
          </div>
        </van-tab>

      </van-tabs>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  components: {
  },
  data() {
    return {
      id: '',
      value: 5.0,
      result: ['a', 'b'],
      driverAppealImages: [],
      orderComplaint:{
        driverAppealDescribe: '',
        driverAppealImages: '',
      },
      Ordering:[],
      activeName: 'a',
      active: 'a',
      time: '',
      orderStatusCount: null,
      orderStatusOverCount:null,
      orderDate: new Date(),
      order:[],
      orders:[],
      list:{},
    };
  },
  computed: {
    forderDate() {
      const year = this.orderDate.getFullYear();
      const month = String(this.orderDate.getMonth() + 1).padStart(2, '0');
      const day = String(this.orderDate.getDate()).padStart(2, '0');
      return `${year}/${month}/${day}`;
    },
  },
  methods: {
    created() {
      this.getList();
    },

    zhuan(index){
     if (index===0){
        axios.get(`jiedan/riderQueue/findStatus?status=1`).then(res => {
          this.list = res.data
          console.log(this.list)
        })
      }else if (index===1){
        axios.get(`jiedan/riderQueue/findStatus?status=2`).then(res => {
          this.list = res.data
          console.log(this.list)
        })
      }else if (index===2){
        axios.get(`jiedan/riderQueue/findStatus?status=3`).then(res => {
          this.list = res.data
          console.log(this.list)
        })
      }else if (index===3){
        axios.get(`jiedan/riderQueue/findStatus?status=4`).then(res => {
          this.list = res.data
          console.log(this.list)
        })
      }
    },

    toDingdan() {
      this.$router.push("/dcOrders");
    },
    toqianbao(){
      this.$router.push('/card');
    },
    toPersonalCenter() {
      this.$router.push('/PersonalCenter');
    },
    toxiaoxi(){
      this.$router.push('/newIndex');
    },
  },
};

</script>
<style scoped>
.top-status-bar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #f0f0f0;
  padding: 10px;
}

.top-label {
  position: fixed;
  top: 44px;
  width: 100%;
  background-color: white;
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-left: -11px;
}

#news {
  width: 430px;
  height: 70px;
  margin-top: 10px;
  float: left;
  border-bottom: 1px solid #adadad;
}

#span1 {
  position: absolute;
  float: left;
  width: 329px;
  margin-top: 40px;
  margin-left: 10px;
  font-size: 15px;
  color: #9f9498;
  overflow: hidden;  /* 隐藏超出的内容 */
  text-overflow: ellipsis;  /* 用省略号显示超出的内容 */
  white-space: nowrap;
}

#tabulation{
  width: 430.4px;
  height: 115px;
  background-color: #f0f0f0;
}

.scrollable-container {
  height: 738px; /* 设置一个固定高度 */
  overflow-y: auto; /* 允许垂直滚动 */
}

.OrderList {
  width: 98%;
  height: 170px;
  margin-top: 10px;
  background: #f0f0f0;
  margin-left: 5px;
}

.OrderList1 {
  width: 100%;
  height: 30px;
}

.OrderInco {
  float: left;
  margin-top: 10px;
  margin-left: 20px;
  color: #919191;
}

.OrderList1 span {
  float: left;
  margin-top: 10px;
  margin-left: 20px;
  font-size: 15px;
}

.OrderList11 {
  float: right;
  display: inline-block;
  margin-top: 10px;
  margin-right: 20px;
  color: #508cf4;
  font-size: 15px;
}

.OrderList2 {
  width: 100%;
  height: 40px;
}

.OrderList22 {
  width: 10px;
  height: 10px;
  display: block;
  background: #009587;
  border-radius: 50%;
  margin-top: 20px;
  margin-left: 25px;
}

#span2 {
  display: block;
  text-align: left;
  font-size: 15px;
  margin-top: -6px;
  margin-left: 32px;
  width: 300px;
  overflow: hidden;  /* 隐藏超出的内容 */
  text-overflow: ellipsis;  /* 用省略号显示超出的内容 */
  white-space: nowrap;
}

#span3 {
  display: block;
  text-align: left;
  width: 300px;
  margin-top: -6px;
  margin-left: 32px;
  font-size: 15px;
  overflow: hidden;  /* 隐藏超出的内容 */
  text-overflow: ellipsis;  /* 用省略号显示超出的内容 */
  white-space: nowrap;
}

.OrderList3 {
  margin-top: -20px;
  width: 100%;
  height: 40px;
  margin-left: -1px;
}

.OrderList33 {
  width: 10px;
  height: 10px;
  background: #F0A439;
  border-radius: 50%;
  display: block;
  margin-top: 20px;
  margin-left: 25px;
}

.OrderList44 {
  width: 260px;
  height: 50px;
  display: inline-block;
  float: right;
  margin-top: -8px;
}

.OrderList44 button {
  width: 100px;
  height: 30px;
  margin-left: 118px;
  border-radius: 20px;
  border: 1px solid #767676;
}

#status-2 {
  /* 申诉中状态的样式 */
  float: right;
  display: inline-block;
  margin-top: 10px;
  margin-right: 20px;
  color: #ff0000;
  font-size: 15px;
}
#status-3 {
  /* 申诉通过状态的样式 */
  float: right;
  display: inline-block;
  margin-top: 10px;
  margin-right: 20px;
  color: #767676;
  font-size: 15px;
}
#status-4 {
  /* 申诉未通过状态的样式 */
  float: right;
  display: inline-block;
  margin-top: 10px;
  margin-right: 20px;
  color: #767676;
  font-size: 15px;
}
#ProblemHead {
  width: 100%;
  height: 50px;
  background: white;
}

#ProblemHead .van-icon {
  margin-top: 10px;
  margin-left: 20px;
}

#spans1 {
  font-size: 15px;
  float: left;
  color: black;
  margin-top: 5px;
  text-align: left;
}

.ProblemFeedback1 {
  margin-left: 5%;
  margin-top: 5px;
  width: 95%;
  height: 130px;
  line-height: 30px;
}

.ProblemFeedback2 {
  width: 95%;
  margin-left: 5%;
  height: 200px;
}

.ProblemFeedback22 {
  width: 430.4px;
  vertical-align: top; /* 从顶部对齐 */
  display: inline-block;
}

.ProblemFeedback4 {
  margin-left: 6%;
  width: 88%;
  margin-top: 280px;
  height: 100px;
}
.ProblemFeedback5 {
  width: 55%;
  float: right;
  display: block;
  margin-right: 5%;
  bottom: 5px;
  height: 50px;
}
#toReturn{
  width:55%;
  display: block;
  float: left;
  margin-left: -63%;
  height: 44px;
}
#url{
  width: 370px;
  height: 80px;
  float: left;
  margin-left: 5px;
}
.neirong{
  width: 400px;
  height: 700px;
  float: left;
  margin-left: 20px;
  ul{
    width: 400px;
    height: 700px;
    background-color: #f6f6f6;
  }
}
#center{
  width: 400px;
  height: 150px;
  background-color: #FFFFFF;
  float: left;
  margin-top: 10px;
  button{
    width: 60px;
    height: 25px;
    font-size: 12px;
    border: 1px solid #000000;
    border-radius: 10px;
    float: right;
    margin-top: 5px;
  }
}
.wz{
  width: 100%;
  height: 30px;
  margin-top: 5px;
}
.huiqiu {
  width: 15px;
  height: 15px;
  background-color: #313131;
  border-radius: 10px;
  float: left;
  margin-top: 2px;
}
.lvqiu{
  width: 10px;
  height: 10px;
  background-color: #00ff0b;
  border-radius: 8px;
  float: left;
  margin-top: 6px;
}
.huangqiu{
  width: 10px;
  height: 10px;
  background-color: #ffa500;
  border-radius: 8px;
  float: left;
  margin-top: 6px;
}
.sj{
  font-size: 15px;
  float: left;
  margin-left: 15px;
  margin-top: 3px;
}
</style>
